<template>
  <div class="test-wrap">
    <div class="sentiment-content">
      <div class="flex-left">
        <normalSearch></normalSearch>
        <div class="search-detail-wrap">
          <div class="status-switch-btn ps-rel">
            <ul class="status-btn clearfloat">
              <li class=" status-btn-item"
                  v-for="item in statusAjaxList" :key="item.name"
                  :data-status = "item.status"
                  :data-statusActive = "statusActive"
                  :class="[{'status-btn-first':(statusActive == item.status && statusActive == statusAjaxList[0].status)},{'status-btn-center':(statusActive == item.status && statusActive != statusAjaxList[0].status && statusActive != statusAjaxList[statusAjaxList.length - 1].status)},{'status-btn-last':(statusActive == item.status && statusActive == statusAjaxList[statusAjaxList.length - 1].status)}]"
                  @click="statusBtnFn(item.status)">
                {{ item.status | status }}
                <span v-text="'( '+item.count+' )'"></span>
              </li>
            </ul>
            <ul class="status-right-btn clearfloat">
            <li :class="{'status-pic':picOrList == 'pic'}"
                @click="picOrListFn('pic')"
                class="status-right-picbtn pointer f-l"></li>
              <li :class="{'status-list':picOrList == 'list'}"
                  @click="picOrListFn('list')"
                  class="status-right-listbtn pointer f-l"></li>
              <li @click="AddSentimentModelClose"
                  class="status-right-addbtn pointer f-l">+&nbsp;新增舆情</li>
            </ul>
          </div>
          <div class="status-switch-detail">
            <div v-show="picOrList == 'pic'">
              <picBox></picBox>
            </div>
            <div v-show="picOrList == 'list'">
              <!---->
              <div class="table-ctrl-body">
                <!--表格组-->
                <div class="table-ctrl">
                  <!--表格头-->
                  <!--{{treeTableRow}}-->
                  <div class="table-header">
                    <table class="table-default">
                      <thead>
                      <tr>
                        <th v-for="ths in tableHeader">
                          {{ths.value}}
                        </th>
                      </tr>
                      </thead>
                    </table>
                  </div>
                  <!--表格中部-->
                  <div class="table-overflowX query-table-body">
                    <table class="table-default">
                      <tbody>
                      <tr class="query-tbody-tr"
                          v-for="(trs,index) in tableRow"
                      >
                        <td class="query-tbody-td"
                            v-for="tds in tableHeader"
                            :title="trs[tds.key]">
                          {{ trs[tds.key]}}
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <!--表格组 end-->
              </div>
            </div>
          </div>
          <div class="status-switch-pagination"></div>
        </div>
      </div>
      <div class="flex-right">
        <sideEcharts></sideEcharts>
      </div>
      <AddSentiment :AddSentimentModelObj="AddSentimentModelObj"
                    @AddSentimentModelClose="AddSentimentModelClose"
      ></AddSentiment>
    </div>
  </div>
</template>

<script>
import sideEcharts from '@/components/echarts/sideEcharts'
import normalSearch from '@/components/search/normalSearch'
import AddSentiment from '@/components/sentiment/AddSentiment'
import picBox from '@/components/sentiment/picBox'
export default {
  name: 'sentimentIndex',
  data () {
    return {
      statusAjaxList: [{
        'status': 0,
        'count': 50
      }, {
        'status': 1,
        'count': 20
      }, {
        'status': 2,
        'count': 10
      }, {
        'status': 4,
        'count': 10
      }, {
        'status': 5,
        'count': 10
      }],
      statusActive: 0,
      picOrList: 'pic', // pic | list
      // 新增舆情
      AddSentimentModelObj: {
        isShow: false
      },
      tableRow: [], // 表格数据
      tableHeader: [
        { 'key': 'sendStationName', 'value': '发送单位' },
        { 'key': 'sendPersonName', 'value': '发送人' },
        { 'key': 'receiveStationName', 'value': '接收单位' },
        { 'key': 'receivePersonName', 'value': '收件人' },
        { 'key': 'messageContent', 'value': '短信内容' },
        { 'key': 'sendTime', 'value': '发送时间' },
        { 'key': 'status', 'value': '状态' }
      ]
    }
  },
  components: {
    sideEcharts,
    normalSearch,
    AddSentiment,
    picBox
  },
  mounted () {

  },
  methods: {
    // 状态切换按钮组点击事件
    statusBtnFn (status) {
      // 标记是那个status按钮被点击
      this.statusActive = status
      console.log(status)
    },
    // 图片和表单展现切换
    picOrListFn (str) {
      this.picOrList = str
    },
    // 新增弹窗显示与隐藏
    AddSentimentModelClose () {
      this.AddSentimentModelObj.isShow = !this.AddSentimentModelObj.isShow
      console.log(this.AddSentimentModelObj.isShow)
      if (this.AddSentimentModelObj.isShow === false) {
        // 重新加载表格

      }
    }
  } // methods end
}
</script>

<style scoped>
.test-wrap {
  width: 100%;
  height: 100%;
  padding: 5.3% 2.8% 1% 2%;
  box-sizing: border-box;
}
</style>
